<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>代码生成器 - 静态页面</title>
  <!-- 引入Element UI CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css">
  <!-- 引入Vue 2.x -->
  <script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
  <!-- 引入Element UI JS -->
  <script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
    }
    .builder-container {
      width: 100%;
      height: 100vh;
      display: flex;
      position: relative;
    }
    .builder-left {
      width: 201px;
      height: 100%;
      border-right: 2px solid #dcd6d6;
      position: relative;
    }
    .module-name {
      color: #2d8cf0;
      font-size: 13px;
      line-height: 39px;
      padding-left: 15px;
      border: 1px solid #abdcff;
      background-color: #f0faff;
    }
    .builder-tree {
      position: absolute;
      top: 41px;
      bottom: 0;
      width: 100%;
    }
    .builder-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .coder-container {
      flex: 1;
      overflow-y: auto;
      background: #eee;
    }
    .coder-item {
      background: white;
      padding: 0px 15px;
      margin-bottom: 10px;
    }
    .config {
      padding: 15px 15px 0px 15px;
      background: #ffffff;
      margin-bottom: 10px;
    }
    .action {
      text-align: right;
      line-height: 33px;
      padding-right: 26px;
    }
    .action i {
      top: 0px;
      position: relative;
    }
    .action > span {
      padding: 0px 6px;
      font-size: 12px;
      letter-spacing: 1px;
      color: #5a5f5e;
      cursor: pointer;
    }
    .action > span:hover {
      color: black;
    }
    .grid-container {
      padding-bottom: 20px;
    }
    .addModel {
      padding: 10px;
    }
    .vol-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }
    .vol-header .title {
      display: flex;
      align-items: center;
    }
    .vol-header .title i {
      margin-right: 8px;
      color: #2d8cf0;
    }
    .vol-header .content {
      margin-left: 10px;
      color: red;
      font-size: 13px;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 新建配置对话框 -->
    <el-dialog
      title="新建配置信息"
      :visible.sync="addModel"
      width="550px"
      :close-on-click-modal="false"
    >
      <div style="padding: 0">
        <el-alert type="warning" :closable="false">
          1、如果只是创建目录，父级id填0,其他随便填写;<br />
          2、如果是生成代码，父级id填写【代码生成配置】列表页面的id
        </el-alert>
      </div>
      <div class="addModel">
        <el-form :model="layOutOptins.fields" label-width="90px">
            <template v-for="(row, rowIndex) in addOptions">
              <el-row :gutter="20" :key="rowIndex">
                <template v-for="(item, itemIndex) in row">
                  <el-col :span="item.colSize || 24" :key="itemIndex">
                  <el-form-item :label="item.title" :required="item.required">
                    <el-input
                      v-if="item.type === 'text' || !item.type"
                      v-model="layOutOptins.fields[item.field]"
                      :placeholder="item.placeholder"
                      :readonly="item.readonly"
                      :disabled="item.disabled"
                    ></el-input>
                    <el-select
                      v-else-if="item.type === 'select'"
                      v-model="layOutOptins.fields[item.field]"
                      :placeholder="item.placeholder"
                    >
                      <el-option
                        v-for="option in item.data"
                        :key="option.key"
                        :label="option.value"
                        :value="option.key"
                      ></el-option>
                    </el-select>
                    <el-input-number
                      v-else-if="item.type === 'number'"
                      v-model="layOutOptins.fields[item.field]"
                      :min="item.min"
                      :placeholder="item.placeholder"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </template>
            </el-row>
          </template>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addModel = false">取消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 主容器 -->
    <div class="builder-container">
      <!-- 左侧树状菜单 -->
      <div class="builder-left">
        <div class="module-name">代码生成配置</div>
        <div class="builder-tree">
          <el-scrollbar style="height: 100%; width: 100%">
            <el-tree
              :data="tree"
              :props="treeProps"
              @node-click="onSelect"
              default-expand-all
            ></el-tree>
          </el-scrollbar>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="builder-content">
        <el-scrollbar style="height: 100%">
          <div class="coder-container">
            <!-- 代码生成器配置 -->
            <div class="coder-item" style="padding-top: 7px">
              <div class="vol-header">
                <div class="title">
                  <i class="el-icon-chat-dot-round"></i>
                  <span>代码生成器</span>
                  <div class="content">删除左侧配置菜单:删除行->保存->删除菜单</div>
                </div>
                <div class="action">
                  <span @click="save"><i class="el-icon-check"></i>保存</span>
                  <span @click="addVisible()"><i class="el-icon-plus"></i>新建</span>
                  <span @click="ceateVuePage(0)"><i class="el-icon-document"></i>生成Vue页面</span>
                  <span @click="ceateVuePage(1)"><i class="el-icon-document"></i>生成app页面</span>
                  <span @click="ceateModel"><i class="el-icon-tickets"></i>生成Model</span>
                  <span @click="createService"><i class="el-icon-document"></i>生成业务类</span>
                  <span @click="delTree"><i class="el-icon-delete"></i>删除菜单</span>
                </div>
              </div>
              <div class="config">
                  <el-form :model="layOutOptins.fields" label-width="90px">
                    <template v-for="(row, rowIndex) in layOutOptins.options">
                      <el-row :gutter="20" :key="rowIndex">
                        <template v-for="(item, itemIndex) in row">
                          <el-col :span="item.colSize || 24" :key="itemIndex">
                          <el-form-item :label="item.title" :required="item.required">
                            <el-input
                              v-if="item.type === 'text' || !item.type"
                              v-model="layOutOptins.fields[item.field]"
                              :placeholder="item.placeholder"
                              :readonly="item.readonly"
                              :disabled="item.disabled"
                            ></el-input>
                            <el-select
                              v-else-if="item.type === 'select'"
                              v-model="layOutOptins.fields[item.field]"
                              :placeholder="item.placeholder"
                            >
                              <el-option
                                v-for="option in item.data"
                                :key="option.key"
                                :label="option.value"
                                :value="option.key"
                              ></el-option>
                            </el-select>
                            <el-input-number
                              v-else-if="item.type === 'number'"
                              v-model="layOutOptins.fields[item.field]"
                              :min="item.min"
                              :placeholder="item.placeholder"
                            ></el-input-number>
                          </el-form-item>
                        </el-col>
                      </template>
                    </el-row>
                  </template>
                </el-form>
              </div>
            </div>

            <!-- 提示信息 -->
            <el-alert type="warning" :closable="false">
              1、如果需要修改表结构，请在数据库修改，再点同步表结构->生成vue页面->生成model。
              2、修改编辑行后需要点击生成model、生成vue页面
            </el-alert>

            <!-- 表结构配置 -->
            <div class="coder-item">
              <div class="vol-header" style="border-bottom: 0">
                <div class="title">
                  <i class="el-icon-trophy"></i>
                  <span>表结构</span>
                  <div class="content">数据库表结构发生变化时请点【同步表结构】</div>
                </div>
                <div class="action">
                  <span @click="delRow" class="ivu-icon ivu-icon-md-close">删除行数据</span>
                  <span @click="syncTable" class="ivu-icon ivu-icon-md-sync">同步表结构</span>
                </div>
              </div>

              <div class="grid-container" style="padding-bottom: 20px">
                <el-table
                  :data="data"
                  :height="tableHeight"
                  border
                  stripe
                  style="width: 100%"
                >
                  <el-table-column type="index" label="序号" width="80"></el-table-column>
                  <el-table-column
                    v-for="column in layOutOptins.columns"
                    :key="column.field"
                    :prop="column.field"
                    :label="column.title"
                    :width="column.width"
                    :align="column.align"
                    v-if="!column.hidden"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-if="column.edit && column.edit.type === 'text'"
                        v-model="scope.row[column.field]"
                        size="mini"
                      ></el-input>
                      <el-switch
                        v-else-if="column.edit && column.edit.type === 'switch'"
                        v-model="scope.row[column.field]"
                        active-value="1"
                        inactive-value="0"
                      ></el-switch>
                      <el-select
                        v-else-if="column.edit && column.edit.type === 'select'"
                        v-model="scope.row[column.field]"
                        size="mini"
                      >
                        <el-option
                          v-for="option in column.bind.data"
                          :key="option.key"
                          :label="option.value"
                          :value="option.key"
                        ></el-option>
                      </el-select>
                      <span v-else>{{ scope.row[column.field] }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>

  <script>
    // builderData.jsx 中的数据
    let columnType = [
      { key: 1, value: 'img' },
      { key: 2, value: 'excel' },
      { key: 3, value: 'file' },
      { key: 6, value: 'year(年)' },
      { key: 4, value: 'date(年月日)' },
      { key: 5, value: 'month(年月)' }
    ];

    let dataType = [
      { key: 'text', value: 'input' },
      { key: 'textarea', value: 'textarea' },
      { key: 'switch', value: 'switch' },
      { key: 'select', value: 'select' },
      { key: 'selectList', value: 'select多选' },
      { key: 'year', value: '年' },
      { key: 'date', value: 'date(年月日)' },
      { key: 'datetime', value: 'datetime(年月日时分秒)' },
      { key: 'month', value: '年月' },
      { key: 'time', value: 'time' },
      { key: 'password', value: '密码输入框' },
      { key: 'checkbox', value: 'checkbox多选' },
      { key: 'radio', value: 'radio单选' },
      { key: 'cascader', value: '级联' },
      { key: 'treeSelect', value: '树形下拉框(多选)treeSelect' },
      { key: 'editor', value: '富文本编辑器' },
      { key: 'mail', value: 'mail' },
      { key: 'number', value: 'number' },
      { key: 'decimal', value: 'decimal' },
      { key: 'phone', value: 'phone' },
      { key: 'color', value: '颜色选择器' },
      { key: 'img', value: 'img' },
      { key: 'excel', value: 'excel' },
      { key: 'file', value: 'file' },
      { key: 'rate', value: '评分' }
    ];

    let searchDataType = [
      { key: '=', value: '等于' },
      { key: '!=', value: '不等于' },
      { key: 'like', value: '%模糊查询%' },
      { key: 'likeStart', value: '模糊查询%' },
      { key: 'likeEnd', value: '%模糊查询' },
      { key: 'textarea', value: 'textarea' },
      { key: 'switch', value: 'switch' },
      { key: 'select', value: 'select' },
      { key: 'selectList', value: 'select多选' },
      { key: 'year', value: '年' },
      { key: 'date', value: 'date(年月日)' },
      { key: 'datetime', value: 'datetime(年月日时分秒)' },
      { key: 'month', value: 'year_month' },
      { key: 'time', value: 'time' },
      { key: 'cascader', value: '级联' },
      { key: 'treeSelect', value: '树形级联tree-select' },
      { key: 'checkbox', value: 'checkbox' },
      { key: 'radio', value: 'radio' },
      { key: 'range', value: '区间查询' },
      { key: 'mail', value: 'mail' },
      { key: 'number', value: 'number' },
      { key: 'decimal', value: 'decimal' }
    ];

    let builderData = {
      form: {
        fields: {
          table_Id: '',
          parentId: null,
          namespace: '',
          columnCNName: '',
          tableName: '',
          tableTrueName: '',
          folderName: '',
          detailCnName: '',
          detailName: '',
          expressField: '',
          sortName: '',
          richtitle: '',
          uploadField: '',
          uploadMaxCount: '',
          enable: 0,
          vuePath: '',
          appPath: '',
          userPermissionDesc: ''
        },
        addOptions: [
          [
            { title: '父 级 ID', min: 0, field: 'parentId', required: true, type: 'number', placeholder: '放在【代码生成配置】列表的文件夹ID下,如果填入【0】就是一级目录' }
          ],
          [
            { title: '项目类库', field: 'namespace', placeholder: '代码生成后的所在类库(可以自己提前在后台项目中创建一个.netcore类库)', type: 'select', required: true, data: [] }
          ],
          [
            { title: '表中文名', field: 'columnCNName', required: true, placeholder: '表对应的中文名字,界面上显示会用到' }
          ],
          [
            { title: '实际表名', field: 'tableName', required: true, placeholder: '数据库实际表名或者视图名(多表关联请创建视图再生成代码)' }
          ],
          [
            { title: '文件夹名', placeholder: '生成文件所在类库中的文件夹名(文件夹可以不存在);注意只需要填写文件夹名，不是路径', field: 'folderName', required: true }
          ]
        ],
        options: [
          [
            { title: '主 键 ID', field: 'table_Id', dataSource: [], readonly: true, disabled: true, columnType: 'int' },
            { title: '父 级 ID', field: 'parentId', min: 0, required: true, type: 'number' },
            { title: '项目类库', placeholder: '代码生成存放的位置', field: 'namespace', type: 'select', required: true, data: [], colSize: 6 }
          ],
          [
            { title: '表中文名', field: 'columnCNName', dataSource: [], required: true },
            { title: '表 别 名', placeholder: '默认与实际表名相同', field: 'tableName', required: true },
            { title: '实际表名', field: 'tableTrueName' },
            { title: '文件夹名', placeholder: '生成文件所在类库中的文件夹名(文件夹可以不存在)', field: 'folderName', required: true }
          ],
          [
            { title: '明细中文名', field: 'detailCnName', placeholder: '明细表中文名字' },
            { title: '明细表名', field: 'detailName', placeholder: '数据库表名' },
            { title: '快捷编辑', field: 'expressField', placeholder: '快捷编辑字段' },
            { title: '排序字段', field: 'sortName', placeholder: '多个排序字段逗号隔开(默认降序排序),如：Name,Age' }
          ],
          [
            { title: 'Vue路径', field: 'vuePath', type: 'text', placeholder: '路径：E:/app/src/views', colSize: 6 },
            { title: 'app路径', field: 'appPath', type: 'text', placeholder: '路径：E:/uniapp/pages', colSize: 6 }
          ]
        ]
      },
      columns: [
        { field: 'columnId', title: 'ColumnId', width: 120, align: 'left', edit: { type: 'text' }, hidden: true },
        { field: 'table_Id', title: 'Table_Id', width: 120, align: 'left', editor: 'text', hidden: true },
        { field: 'columnCnName', title: '列显示名称', fixed: true, width: 120, align: 'left', edit: { type: 'text' } },
        { field: 'columnName', title: '列名', fixed: true, width: 120, align: 'left', edit: { type: 'text' } },
        { field: 'isKey', title: '主键', width: 90, align: 'left', edit: { type: 'switch' } },
        { field: 'sortable', title: '是否排序', width: 90, align: 'left', edit: { type: 'switch', keep: true } },
        { field: 'enable', title: 'app列', width: 140, align: 'left', edit: { type: 'select' }, bind: { data: [{ key: 1, value: '显示/查询/编辑' }, { key: 2, value: '显示/编辑' }, { key: 3, value: '显示/查询' }, { key: 4, value: '显示' }, { key: 5, value: '查询/编辑' }, { key: 6, value: '查询' }, { key: 7, value: '编辑' }] } },
        { field: 'searchRowNo', title: '查询行', width: 90, align: 'left', edit: { type: 'text' } },
        { field: 'searchColNo', title: '查询列', width: 90, align: 'left', edit: { type: 'text' } },
        { field: 'searchType', title: '查询类型', width: 150, align: 'left', edit: { type: 'select' }, bind: { data: searchDataType } },
        { field: 'editRowNo', title: '编辑行', width: 90, align: 'numberbox', edit: { type: 'text' } },
        { field: 'editColNo', title: '编辑列', width: 90, align: 'numberbox', edit: { type: 'text' } },
        { field: 'editType', title: '编辑类型', width: 150, align: 'left', edit: { type: 'select' }, bind: { data: dataType } },
        { field: 'dropNo', title: '数据源', width: 120, align: 'left', bind: { data: [] }, edit: { type: 'select', data: [] } },
        { field: 'isImage', title: 'table列显示类型', hidden: false, width: 130, align: 'left', edit: { type: 'select' }, bind: { data: columnType } },
        { field: 'orderNo', title: '列显示顺序', width: 120, align: 'left', edit: { type: 'text' } },
        { field: 'maxlength', title: '字段最大长度', width: 130, align: 'left', edit: { type: 'text' } },
        { field: 'columnType', title: '数据类型', width: 120, align: 'left', edit: { type: 'text' } },
        { field: 'isNull', title: '可为空', width: 120, align: 'left', edit: { type: 'switch', keep: true } },
        { field: 'isReadDataset', title: '是否只读', width: 120, align: 'left', edit: { type: 'switch', keep: true } },
        { field: 'isDisplay', title: '是否显示', width: 120, align: 'left', edit: { type: 'switch', keep: true } },
        { field: 'columnWidth', title: 'table列宽度', width: 120, align: 'left', edit: { type: 'text' } },
        { field: 'colSize', title: '编辑字段宽度colSize', width: 180, align: 'left', edit: { type: 'select' }, bind: { data: [{ key: 0, value: '自动宽度' }, { key: 2, value: '20%' }, { key: 3, value: '30%' }, { key: 4, value: '40%' }, { key: 6, value: '50%' }, { key: 8, value: '60%' }, { key: 10, value: '80%' }, { key: 12, value: '100%' }] } }
      ]
    };

    // Mock数据
    let mockData = {
      // 模拟树结构数据
      tree: [
        { id: '1', parentId: 0, name: '系统管理', orderNo: 10000 },
        { id: '2', parentId: '1', name: '用户管理', orderNo: 9950 },
        { id: '3', parentId: '1', name: '角色管理', orderNo: 9900 },
        { id: '4', parentId: 0, name: '业务模块', orderNo: 9850 },
        { id: '5', parentId: '4', name: '订单管理', orderNo: 9800 }
      ],
      // 模拟表结构数据
      tableColumns: [
        { columnId: '1', table_Id: '2', columnCnName: '用户ID', columnName: 'Id', isKey: '1', sortable: '0', enable: '1', searchRowNo: '1', searchColNo: '1', searchType: '=', editRowNo: '1', editColNo: '1', editType: 'number', dropNo: '', isImage: '', orderNo: 10000, maxlength: '10', columnType: 'int', isNull: '0', isReadDataset: '1', isDisplay: '1', columnWidth: '100', colSize: '2' },
        { columnId: '2', table_Id: '2', columnCnName: '用户名', columnName: 'UserName', isKey: '0', sortable: '1', enable: '1', searchRowNo: '1', searchColNo: '2', searchType: 'like', editRowNo: '1', editColNo: '2', editType: 'text', dropNo: '', isImage: '', orderNo: 9950, maxlength: '50', columnType: 'nvarchar', isNull: '0', isReadDataset: '0', isDisplay: '1', columnWidth: '150', colSize: '4' },
        { columnId: '3', table_Id: '2', columnCnName: '邮箱', columnName: 'Email', isKey: '0', sortable: '0', enable: '1', searchRowNo: '2', searchColNo: '1', searchType: 'like', editRowNo: '2', editColNo: '1', editType: 'mail', dropNo: '', isImage: '', orderNo: 9900, maxlength: '100', columnType: 'nvarchar', isNull: '1', isReadDataset: '0', isDisplay: '1', columnWidth: '200', colSize: '6' },
        { columnId: '4', table_Id: '2', columnCnName: '手机号码', columnName: 'PhoneNumber', isKey: '0', sortable: '0', enable: '1', searchRowNo: '2', searchColNo: '2', searchType: 'like', editRowNo: '2', editColNo: '2', editType: 'phone', dropNo: '', isImage: '', orderNo: 9850, maxlength: '20', columnType: 'nvarchar', isNull: '1', isReadDataset: '0', isDisplay: '1', columnWidth: '150', colSize: '6' },
        { columnId: '5', table_Id: '2', columnCnName: '创建时间', columnName: 'CreateTime', isKey: '0', sortable: '1', enable: '1', searchRowNo: '3', searchColNo: '1', searchType: 'datetime', editRowNo: '3', editColNo: '1', editType: 'datetime', dropNo: '', isImage: '', orderNo: 9800, maxlength: '23', columnType: 'datetime', isNull: '0', isReadDataset: '1', isDisplay: '1', columnWidth: '180', colSize: '8' }
      ],
      // 模拟命名空间数据
      nameSpace: ['Vol.Core', 'Vol.Business', 'Vol.Application', 'Vol.WebApi'],
      // 模拟字典数据
      dictionary: ['性别', '角色类型', '用户状态', '订单状态']
    };

    // Vue应用
    new Vue({
      el: '#app',
      data() {
        return {
          addModel: false,
          tableHeight: 500,
          addOptions: builderData.form.addOptions,
          layOutOptins: {
            fields: JSON.parse(JSON.stringify(builderData.form.fields)),
            options: JSON.parse(JSON.stringify(builderData.form.options)),
            columns: JSON.parse(JSON.stringify(builderData.columns))
          },
          tableInfo: null,
          data: [],
          tree: [],
          treeProps: {
            children: 'children',
            label: 'name',
            parentId: 'parentId'
          }
        };
      },
      methods: {
        // 模拟HTTP请求
        mockHttpPost(url, data, showLoading) {
          return new Promise((resolve) => {
            setTimeout(() => {
              // 模拟不同API的响应
              if (url.includes('/api/builder/GetTableTree')) {
                // 模拟获取树结构
                resolve({
                  list: JSON.stringify(mockData.tree),
                  nameSpace: JSON.stringify(mockData.nameSpace)
                });
              } else if (url.includes('/api/Sys_Dictionary/GetBuilderDictionary')) {
                // 模拟获取字典数据
                resolve(mockData.dictionary);
              } else if (url.includes('/api/builder/LoadTableInfo')) {
                // 模拟加载表信息
                const tableId = url.split('table_Id=')[1].split('&')[0];
                resolve({
                  status: true,
                  data: {
                    table_Id: tableId,
                    parentId: '1',
                    namespace: 'Vol.Core',
                    columnCNName: '用户管理',
                    tableName: 'Sys_User',
                    tableTrueName: 'Sys_User',
                    folderName: 'System',
                    detailCnName: '',
                    detailName: '',
                    expressField: 'UserName',
                    sortName: 'CreateTime',
                    richtitle: '',
                    uploadField: '',
                    uploadMaxCount: '',
                    enable: 0,
                    vuePath: '',
                    appPath: '',
                    userPermissionDesc: '',
                    tableColumns: mockData.tableColumns
                  }
                });
              } else if (url.includes('/api/builder/Save')) {
                // 模拟保存
                resolve({
                  status: true,
                  message: '保存成功',
                  data: this.tableInfo
                });
              } else {
                // 默认响应
                resolve({ status: true, message: '操作成功' });
              }
            }, 500);
          });
        },
        
        addVisible(pid) {
          this.addModel = true;
          this.data = [];
          if (pid) {
            this.layOutOptins.fields.parentId = pid;
          }
        },
        
        add() {
          // 模拟添加配置
          this.mockHttpPost('/api/builder/LoadTableInfo', {}, true).then((x) => {
            if (!x.status) {
              this.$message.error(x.message);
              return;
            }
            
            // 添加到树结构
            const newNode = {
              id: x.data.table_Id,
              parentId: x.data.parentId,
              name: x.data.columnCNName,
              orderNo: x.data.orderNo
            };
            
            const hasTree = this.tree.some((t) => t.id == x.data.table_Id);
            if (!hasTree) {
              this.tree.push(newNode);
            }
            
            this.addModel = false;
            this.tableInfo = x.data;
            this.data = x.data.tableColumns;
          });
        },
        
        delTree() {
          this.$confirm('确认要删除吗?', '删除警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message.success('删除成功');
          }).catch(() => {
            this.$message.info('已取消删除');
          });
        },
        
        delRow() {
          this.$confirm('确认要删除选择的数据吗?', '删除警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message.success('删除成功');
          }).catch(() => {
            this.$message.info('已取消删除');
          });
        },
        
        syncTable() {
          this.$message.info('表结构同步成功');
        },
        
        save() {
          this.mockHttpPost('/api/builder/Save', this.tableInfo, true).then((x) => {
            if (!x.status) {
              this.$message.error(x.message);
              return;
            }
            this.$message.success(x.message);
          });
        },
        
        ceateVuePage(isApp) {
          this.$message.info(`生成${isApp ? 'app' : 'Vue'}页面成功`);
        },
        
        createService() {
          this.$message.info('生成业务类成功');
        },
        
        ceateModel() {
          this.$message.info('生成Model成功');
        },
        
        onSelect(node) {
          // 模拟加载表信息
          this.mockHttpPost(`/api/builder/LoadTableInfo?table_Id=${node.id}&isTreeLoad=true`, {}, true).then((x) => {
            this.tableInfo = x.data;
            this.data = x.data.tableColumns;
          });
        },
        
        getVuePath(key) {
          return localStorage.getItem(key) || '';
        }
      },
      mounted() {
        // 设置表格高度
        let clientHeight = document.documentElement.clientHeight - 170;
        this.tableHeight = clientHeight < 400 ? 400 : clientHeight;
        
        // 模拟加载字典数据
        this.mockHttpPost('/api/Sys_Dictionary/GetBuilderDictionary', {}, true).then((dic) => {
          let column = this.layOutOptins.columns.find((x) => x.field == 'dropNo');
          if (!column) return;
          
          let data = [{ key: '', value: '' }];
          for (let index = 0; index < dic.length; index++) {
            data.push({ key: dic[index], value: dic[index] });
          }
          
          column.bind.data = data;
        });
        
        // 加载Vue路径
        builderData.form.fields.vuePath = this.getVuePath('vuePath');
        builderData.form.fields.appPath = this.getVuePath('appPath');
        
        // 模拟加载树结构和命名空间
        this.mockHttpPost('/api/builder/GetTableTree', {}, false).then((x) => {
          this.tree = JSON.parse(x.list);
          
          let nameSpaceArr = [];
          let nameSpace = JSON.parse(x.nameSpace);
          for (let index = 0; index < nameSpace.length; index++) {
            nameSpaceArr.push({ key: nameSpace[index], value: nameSpace[index] });
          }
          
          // 初始化项目命名空间
          this.layOutOptins.options.forEach((option) => {
            option.forEach((item) => {
              if (item.field == 'namespace') {
                item.data = nameSpaceArr;
              }
            });
          });
          
          this.addOptions.forEach((option) => {
            option.forEach((item) => {
              if (item.field == 'namespace') {
                item.data = nameSpaceArr;
              }
            });
          });
        });
      }
    });
  </script>
</body>
</html>